<!DOCTYPE html>
<html>
<head>
    <title>益多多回收</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
    <link rel="stylesheet" type="text/css" href="${s.base}/mobile/js/DateSelector/DateSelector.css?rev=@@hash"/>
    <style type="text/css">
        .weui-btn{line-height: 90px; height: 90px; font-size: 28px; width: 80%;}
        button.weui-btn, input.weui-btn{width: 80%;}
        .date-selector-container{height: 350px;}
        .date-selector-content .date-selector{height: 270px;}
        .date-selector-tab-box{height: 47px;line-height: 47px; color: #999999; }
        .date-selector-btn-box{height: 80px; line-height: 80px;}
        .date-selector-btn-box .date-selector-btn{color: #000000;}
        .date-selector-tab-box .date-selector-tab-active{color: #666666;}
        .date-selector-content{top:80px;}
        .date-selector-content li {
            font-size: 28px;
        }
        .xyg-index{width:100%;height:auto;}
        .xyg-index .xyg-index-content .xyg-index-content-btn{width:93%; height:auto; margin:0.2rem 3.5%; }
        .xyg-index-content-btn .xyg-index-content-btn-item{width:31.2%;height:8.5rem; margin: 0.2rem 1%; float: left;border: 0.01rem solid #E5E5E5;background:#ffffff ;}
        .xyg-index-content-btn .xyg-index-content-btn-item .xyg-index-content-btn-item-bg{width:50%; height:auto; margin: 1rem auto 0.2rem auto;}
        .xyg-index-content-btn .xyg-index-content-btn-item .xyg-index-content-btn-item-title{width:100%; height:1rem;  text-align:center;color:#666666;letter-spacing: 0.1rem;}
        .xyg-index-dd{width:96%; padding: 0px 2%; height:auto;background: #ffffff;}
        .xyg-index-dd .xyg-index-dd-item{width:50%;height:8rem;position: relative; float: left;margin-top: 0.2rem;}
        .xyg-index-dd .xyg-index-dd-item .xyg-index-dd-item-bg{width:100%; height:8rem;}
        .xyg-index-dd .xyg-index-dd-item .xyg-index-dd-item-title{color: #000000;font-size:35px; letter-spacing: 0.1rem; position: absolute; top:3rem; left:3.5rem;}
        .xyg-index-dd .xyg-index-dd-item  .xyg-index-dd-item-desc{color: #ffffff;letter-spacing: 0.1rem; font-size: 28px;  position: absolute; top:4.2rem; left:1.2rem;}

    </style>
</head>
<body style="background:#fafafa;">
<input type="hidden" value="" id="latitude"/>
<input type="hidden" value="" id="longitude"/>
 <!--头部开始-->
    <div class="xyg-comp-banner swiper-container">
		<div class="swiper-wrapper">
            <#list shopBannerList as shopBanner>
                <#if shopBanner.url?? && shopBanner.url!="">
                    <div onClick="goJump('${shopBanner.url}','${memberId}')" class="swiper-slide"><img src="${shopBanner.image}"/></div>
                    <#else>
                        <div  class="swiper-slide"><img src="${shopBanner.image}"/></div>
                </#if>
            </#list>
		</div>
		<div class="swiper-pagination xyg-comp-banner-swiper"></div>
	</div>
   <!--头部结束-->
   <!--通知开始-->
   <div class="xyg-comp-notice">
   		<div class="xyg-comp-notice-left borderRight">
        	<img src="${s.base}/mobile/images/lb.png"/>
        </div>
        <div class="xyg-comp-notice-right">
            <ul class="xyg-comp-notice-content">
                <#list webArticleList as webArticle>
                    <li class="font-grade-one" onclick="getWebArticleDetailPage('${memberId}','${webArticle.id}')">${webArticle.title}</li>
                </#list>
            </ul>
        </div>
        <div class="clearBoth"></div>
   </div>
   <!--通知介绍-->

<style type="text/css">
    .xyg-sel-btn{line-height:70px; font-size:28px; float: left; color: #000000; background: #ffffff;  text-align: center; width: 40%; margin: 10px 4.9%;}
    .xyg-sel-btn-active{color: #FFFFFF; background: #1aad19;}
    .xyg-sel{width: 98%; height: 60px; border: 1px solid #1aad19; margin-top: 19px;border-radius: 30px;}
    .xyg-sel-input{width: 50%; height: 60px; font-size: 22px; text-align: center; color: #000000; background: #ffffff; line-height: 60px; float: left;}
    .xyg-sel-input-active{background: #1aad19; color: #ffffff;}
</style>
<div style="padding-top: 30px; background: #f4f4f4;">
    <div style=" line-height:60px; font-size:32px; color: #000000; text-align: center; width: 100%; ">
        可选择预估重量
    </div>
    <div style="line-height:40px; font-size:28px; color: #ff0000; text-align: center; width: 100%; ">
        (${sysConfig.content}）
    </div>
    <div style="width: 100%; height: auto; margin: 20px 0px;">
        <#list recoveryLargeCatList as recoveryLargeCat>
        <div class="xyg-sel-btn <#if recoveryLargeCat_index == 0> xyg-sel-btn-active</#if>" data-id="${recoveryLargeCat.id}">${recoveryLargeCat.name}</div>
        </#list>
        <div style="clear: both;"></div>
    </div>
</div>
<input type="hidden" id="reserveShow" value="尽快上门">
<div class="xyg-comp-form">
    <div class="xyg-comp-form-item-one">
        <div class="xyg-comp-form-item-title">
            预约时间
        </div>
        <div class="xyg-comp-form-item-icon">
            <div class="xyg-sel" style="float: right;">
                <div class="xyg-sel-input xyg-sel-inbtn xyg-sel-input-active" data-id="1" style="border-radius: 30px 0px 0px 30px;">尽快上门</div>
                <div class="xyg-sel-input xyg-sel-inbtn"  id="reserveTime" data-id="2" style="border-radius: 0px 30px 30px 0px;">预约上门</div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="clearBoth"></div>
    </div>
    <div class="xyg-comp-form-item-one">
        <div class="xyg-comp-form-item-title">
            回收地址
        </div>
        <div class="xyg-comp-form-item-icon">
            <input type="hidden" id="addressId" value="${shopAddress.id}">
            <input type="text" id="address" onclick="goShopAddressListPage('${memberId}','1')" placeholder="请选择回收地址" value="${shopAddress.districtName}${shopAddress.communityName}${shopAddress.descripts}" />
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconxiangyou"></use>
            </svg>
        </div>
        <div class="clearBoth"></div>
    </div>
    <div style=" background: #f4f4f4;">
    <div style="width: 100%; height: 40px;"></div>
    <!--<div class="xyg-comp-form-tip">
          <input id="checkContract" type="checkbox"/>统一《环保协议》的所得税法水电费水电费水电费是否对
    </div> -->
    <input type="button" id="save" class="weui-btn weui-btn_primary color-bs margin-top-1rem" value="一键回收"/>
    <div id="targetContainers" class="xyg-sel-inbtn" data-id="2"></div>
    </div>
</div>
</div>

<!--底部菜单开始-->
<div style="width:100%; height:2.5rem;"></div>
<div class="xyg-comp-bottom">
    <div class="xyg-comp-bottom-item">
        <a href="javascript:void(0)" onclick="goFistPage('${memberId}')">
            <img src="${s.base}/mobile/images/menu_icon_1_a.png"/>
            <div class="xyg-comp-bottom-item-text select-text">首页</div>
        </a>
    </div>
    <div class="xyg-comp-bottom-item">
        <a href="javascript:void(0)" onclick="goHssqPage('${memberId}')">
            <img src="${s.base}/mobile/images/menu_icon_2.png"/>
            <div class="xyg-comp-bottom-item-text">附近网点</div>
        </a>
    </div>
    <div class="xyg-comp-bottom-item">
        <a href="javascript:void(0)" onclick="goMyPage('${memberId}')">
            <img src="${s.base}/mobile/images/menu_icon_3.png"/>
            <div class="xyg-comp-bottom-item-text">我的</div>
        </a>
    </div>
    <div class="clearBoth"></div>
</div>
</body>
</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
<script src="${s.base}/mobile/js/jquery-weui.js"></script>
<script src="${s.base}/mobile/js/swiper.js"></script>
<script src="${s.base}/mobile/fonts/iconfont.js"></script>
<script src="${s.base}/mobile/js/component.js?1216334345454345562"></script>
<script src="${s.base}/mobile/js/base.js?12163345454345562"></script>
<script src="${s.base}/mobile/js/DateSelector/DateSelector.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.fn.initXygCompBanner();
        $.fn.initXygCompNotice($(".xyg-comp-notice-content"));
    });
    var memberId = '${memberId}';
    new DateSelector({
        input: 'reserveTime',//点击触发插件的input框的id
        container: 'targetContainers',//插件插入的容器id
        type: 1,
        //0：不需要tab切换，自定义滑动内容，建议小于三个；
        //1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
        param: [1, 1, 1, 1, 1],
        //设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
        beginTime: [2019, 9, 7, 1, 1],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
        endTime: [2027, 5, 7, 12, 2],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
        recentTime: [],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
        success: function (arr, arr2) {
            $("#reserveShow").val(arr2[0]+"-"+arr2[1]+"-"+arr2[2]+" "+arr2[3]+":"+arr2[4]+"");
            $("#reserveTime").html(arr2[0]+"-"+arr2[1]+"-"+arr2[2]+" "+arr2[3]+":"+arr2[4]+"");
        }//回调
    });

    $(".xyg-sel-btn").bind("click",function () {
        $(".xyg-sel-btn").removeClass("xyg-sel-btn-active");
        $(this).addClass("xyg-sel-btn-active");
    });
    $(".xyg-sel-inbtn").bind("click",function () {
        $(".xyg-sel-input").removeClass("xyg-sel-input-active");
        var num=$(this).attr("data-id");
        if(num=="2"){
            $("#reserveTime").addClass("xyg-sel-input-active");
        }else{
            $("#reserveShow").val("尽快上门");
            $(this).addClass("xyg-sel-input-active");
        }
    });

    $("#save").on("click", function () {
        /*if($('#checkContract').is(':checked') == false) {
         $.toast("请同意环保协议", "text");
         return false;
         }*/

        var largeCatId = $(".xyg-sel-btn-active").attr("data-id");
        if (largeCatId == null || largeCatId == "") {
            $.toast("请先选择预估重量", "text");
            return false;
        }
        // 小区名称
        var address = $("#address").val();
        if (address == null || address == "") {
            $.toast("请先选择地址", "text");
            return false;
        }
        var type = $(".xyg-sel-input-active").attr("data-id");
        var addressId = $("#addressId").val();
        var reservationDate = "";
        if (type == 2) {
            reservationDate = $(".xyg-sel-input-active").html();
        }
        var param = {
            memberId: memberId,
            largeCatId: largeCatId,
            addressId:addressId,
            address: address,
            reservationDate: reservationDate
        };
        $.showLoading("正在提交中");
        $.post("/phone/recoveryorder/saveRecoveryOrder", param, function (result) {
            if (0 == result.code) {
                // showLayerAlertNoRefre("操作成功！");
                $.hideLoading();
                $.alert("提交成功",function () {
                    goFistPage(memberId);
                });
            } else {
                $.hideLoading();
                $.alert(result.msg);
            }
        }, "json");
    });
</script>

